<template>
  <div class="box">
    <div class="top">
      <div class="TLeft">
        <img src="../../../assets/loding.gif" alt="" />
        <p>
          {{
            detailsData.orderState == 1
              ? "待付款"
              : detailsData.orderState == 2
              ? "待发货"
              : detailsData.orderState == 3
              ? "待收货"
              : detailsData.orderState == 4
              ? "待评价"
              : detailsData.orderState == 5
              ? "已完成"
              : "已取消"
          }}
        </p>
      </div>
      <div class="TRight">
        <p>订单编号:{{ detailsData.id }}</p>
        <p>下单时间:{{ detailsData.createTime }}</p>
      </div>
      <div v-if="detailsData.orderState == 1" class="btnBox">
        <el-button type="primary" size="small">立即付款</el-button>
        <el-button
          type="info"
          plain
          size="small"
          @click="oncancel1(detailsData.id)"
          >取消订单</el-button
        >
      </div>
      <div v-else-if="detailsData.orderState == 2" class="btnBox">
        <el-button type="primary" size="small">再次购买</el-button>
      </div>
      <div v-else-if="detailsData.orderState == 4" class="btnBox">
        <el-button type="primary" size="small">再次购买</el-button>
        <el-button type="success" plain size="small">平价商品</el-button>
        <el-button type="info" plain size="small">申请售后</el-button>
      </div>
    </div>
    <!-- 取消订单弹框 -->
    <el-dialog
      title="取消订单"
      :visible.sync="dialogorder"
      width="48%"
      :before-close="handleOredr"
    >
      <span>取消订单后，本单享有的优惠可能会一并取消，是否继续？</span>
      <p>请选择取消订单的原因（必选）：</p>
      <span slot="footer" class="dialog-footer">
        <div class="btnBox">
          <el-button
            v-for="(item, index) in tets"
            :key="index"
            @click="onReasons(item)"
            >{{ item }}</el-button
          >
        </div>
        <div class="Submit">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="oncancel">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 订单时间线 -->
    <el-steps :active="detailsData.orderState" align-center>
      <el-step title="提交订单" :description="detailsData.createTime"></el-step>
      <el-step
        title="付款成功"
        :description="detailsData.orderState == 2 ? detailsData.createTime : ''"
      ></el-step>
      <el-step
        title="商品发货"
        :description="detailsData.orderState == 3 ? detailsData.createTime : ''"
      ></el-step>
      <el-step
        title="确认发货"
        :description="detailsData.orderState == 4 ? detailsData.createTime : ''"
      ></el-step>
      <el-step
        title="订单完成"
        :description="detailsData.orderState == 5 ? detailsData.createTime : ''"
      ></el-step>
    </el-steps>
    <!-- 物流信息 -->
    <div v-if="detailsData.orderState == 4">
      <div class="wuliuBox">
        <div>
          <p>{{ wuliucompany.list[0].text }}</p>
          <p>{{ wuliucompany.list[0].time }}</p>
        </div>
        <div>
          <el-button type="text" @click="wuliu(detailsData.id)"
            >查看物流</el-button
          >
        </div>
      </div>
      <!-- 物流信息弹窗 -->
      <el-dialog
        title="查看物流"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <div class="dialogTop">
          <div class="imgBox">
            <img :src="wuliucompany.picture" alt="" />
            <b class="info">{{ wuliucompany.count }}件商品</b>
          </div>
          <div>
            <p><span>配送企业：</span>{{ wuliucompany.company.name }}</p>
            <p><span>快递单号：</span>{{ wuliucompany.company.number }}</p>
            <p><span>联系电话：</span>{{ wuliucompany.company.tel }}</p>
          </div>
        </div>
        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(activity, index) in wuliucompany.list"
            :key="index"
            :timestamp="activity.time"
          >
            {{ activity.text }}
          </el-timeline-item>
        </el-timeline>
      </el-dialog>
    </div>

    <!-- 商品详情 -->
    <div class="order">
      <p class="orderTitle">订单商品</p>
      <div>
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <td>商品信息</td>
              <td>单价</td>
              <td>数量</td>
              <td>小计</td>
              <td>实付</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="items in tableData" :key="items.id">
              <td
                class="imgBox"
                style="
                   {
                    width: 450px;
                  }
                "
              >
                <img :src="items.image" alt="" />
                <div>
                  <p>{{ items.name }}</p>
                  <p>{{ items.attrsText }}</p>
                </div>
              </td>
              <td style="width: 120px">￥{{ items.realPay }}</td>
              <td style="width: 120px">{{ items.quantity }}</td>
              <td style="width: 120px">￥{{ items.realPay }}</td>
              <td style="width: 120px">￥{{ items.realPay }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 收货信息 -->
    <div class="Receive">
      <p class="orderTitle">收货信息</p>
      <div>
        <p>
          <span class="graytext">收货人:</span>{{ detailsData.receiverContact }}
        </p>
        <p>
          <span class="graytext">联系方式:</span
          >{{ detailsData.receiverMobile }}
        </p>
        <p>
          <span class="graytext">收货地址:</span
          >{{ detailsData.receiverAddress }}
        </p>
      </div>
    </div>
    <!-- 支付方式及送货时间 -->
    <div class="Receive">
      <p class="orderTitle">支付方式及送货时间</p>
      <div>
        <p>
          <span class="graytext">支付方式:</span
          >{{ detailsData.payChannel == 1 ? "支付宝" : 2 == "微信" }}
        </p>
        <p>
          <span class="graytext">送货时间:</span
          >{{
            detailsData.deliveryTimeType == 1
              ? "不限"
              : detailsData.deliveryTimeType == 2
              ? "工作日"
              : 3 == "双休或假日"
          }}
        </p>
      </div>
    </div>
    <!-- 发票信息 -->
    <div class="Receive">
      <p class="orderTitle">发票信息</p>
      <div>
        <p><span class="graytext">发票类型:</span>电子发票</p>
        <p><span class="graytext">发票内容:</span>日用品</p>
        <p><span class="graytext">发票抬头:</span>个人</p>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="Receive">
      <p class="orderTitle">订单信息</p>
      <div>
        <p><span class="graytext">订单编号:</span>{{ detailsData.id }}</p>
        <p>
          <span class="graytext">下单时间:</span>{{ detailsData.createTime }}
        </p>
      </div>
    </div>
    <div class="result">
      <div>
        <p>商品数量：</p>
        <p>{{ detailsData.totalNum }}件</p>
      </div>
      <div>
        <p>商品总价：</p>
        <p>￥{{ detailsData.totalMoney }}</p>
      </div>
      <div>
        <p>运<i></i>费：</p>
        <p>{{ detailsData.postFee }}</p>
      </div>
      <div>
        <p>应付总额：</p>
        <p class="Rtext">￥{{ detailsData.payMoney }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { logisticsData, DetailsData, orderCancel, OrderData } from "@/api/user";
export default {
  name: "DetailsView",
  data() {
    return {
      detailsData: {},
      tableData: [],
      dialogVisible: false,
      dialogorder: false,
      wuliucompany: {},
      reverse: false,
      tets: [
        "配送信息有误",
        "商品买错了",
        "重复下单/误下单",
        "忘记使用优惠劵、免币等",
        "其他渠道价格更低",
        "不想要了",
      ],
      tet: null,
      id: null,
    };
  },
  methods: {
    wuliu(id) {
      console.log(id);
      this.dialogVisible = true;
      // logisticsData(id).then((res) => {
      //   console.log(res);
      //   this.wuliucompany = res.data.result;
      // });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 取消订单弹框
    handleOredr(done) {
      console.log(done);
    },
    // 获取取消订单理由
    onReasons(tet) {
      this.tet = tet;
    },
    // 获取取消订单id
    oncancel1(id) {
      this.id = id;
      this.dialogorder = true;
    },
    // 取消订单
    oncancel() {
      orderCancel(this.id, this.tet).then(() => {
        // console.log(res);
        OrderData().then((res) => {
          // console.log(res.data.result.items);
          this.listArr = res.data.result.items;
        });
        DetailsData(this.$store.state.order.id).then((res) => {
          let datas = res.data.result;
          // console.log(datas);
          this.detailsData = datas;
          this.tableData = datas.skus;
          // this.$router.push({ name: "details", params: datas });
        });
      });
      this.dialogorder = false;
    },
  },
  created() {
    // this.detailsData = this.$route.params;
    // this.tableData = this.$route.params.skus;

    logisticsData(this.detailsData.id).then((res) => {
      // console.log(res);
      this.wuliucompany = res.data.result;
    });

    DetailsData(this.$store.state.order.id).then((res) => {
      console.log(res);
      let datas = res.data.result;
      // console.log(datas);
      this.detailsData = datas;
      this.tableData = datas.skus;
      // this.$router.push({ name: "details", params: datas });
    });
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 74%;
  background: #fff;
  padding: 40px;
  .top {
    display: flex;
    justify-content: space-between;
    .TLeft {
      margin-left: 80px;
      p {
        margin-top: 10px;
      }
    }
    .TRight {
      text-align: left;
      flex: 1;
      padding-top: 20px;
      p {
        line-height: 40px;
        margin-left: 80px;
        font-size: 14px;
        color: #666;
      }
    }
    .btnBox {
      margin-top: 40px;
      margin-right: 40px;
    }
    img {
      width: 60px;
      height: 60px;
    }
  }
  .el-dialog__footer {
    .btnBox {
      width: 100%;
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      .el-dialog {
        width: 50%;
      }
      justify-content: space-evenly;
      .el-button {
        width: 240px;
        height: 60px;
      }
    }
  }

  .Submit {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    .el-button {
      width: 200px;
    }
  }
  //订单时间线
  .el-steps {
    margin-top: 60px;
    :deep .el-step.is-center .el-step__description {
      width: 115px;
      color: #999;
    }
    :deep .el-step.is-horizontal .el-step__line {
      top: 40px;
    }
    :deep .el-step__icon {
      width: 60px;
      height: 60px;
    }
    :deep .el-step__title {
      color: #999;
      font-weight: 300;
      font-size: 14px;
    }
    :deep .el-step__head.is-process {
      border-color: #999;
    }
    :deep .el-step__head.is-finish {
      border-color: #27ba9b;
    }
    :deep .el-step__head.is-finish {
      color: #27ba9b;
    }
    :deep .el-step__icon-inner {
      color: #999;
      font-size: 38px;
      font-weight: 400;
    }
  }
  .orderTitle {
    text-align: left;
    margin: 10px 0;
    height: 60px;
    line-height: 60px;
  }
  .wuliuBox {
    margin-top: 40px;
    display: flex;
    height: 50px;
    line-height: 50px;
    background: #f5f5f5;
    div:first-child {
      flex: 1;
      p {
        margin: 0 10px 0 20px;
        color: #999;
        font-size: 14px;
      }
    }
    .el-button {
      margin-right: 30px;
    }
    div {
      text-align: left;
      display: flex;
    }
  }
  :deep .el-dialog__header {
    text-align: left;
    border-bottom: 1px solid #f5f5f5;
  }
  .dialogTop {
    display: flex;
    background: #f5f5f5;
    .imgBox {
      position: relative;
      img {
        width: 80px;
        height: 80px;
        margin: 20px;
      }
      .info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(153, 153, 153, 0.292);
        width: 80px;
        color: #fff;
        font-weight: 100;
      }
    }

    div {
      margin: 20px 0;
      p {
        margin-top: 10px;
        text-align: left;
        span {
          color: #999;
        }
      }
    }
  }
  // 物流时间线
  .el-timeline {
    margin-top: 40px;
    .el-timeline-item {
      text-align: left;
      padding-bottom: 40px;
    }
  }

  //商品表格
  table {
    border: 1px solid #999 tr {
      border-bottom: 1px solid #999;
    }
    thead {
      border-collapse: collapse;
      tr {
        background: #f5f5f5;
        height: 60px;
        line-height: 60px;
        td {
          box-sizing: border-box;
          padding-left: 50px;
        }
      }
    }
    tbody {
      tr {
        td {
          border-bottom: 1px solid #f5f5f5;
          text-align: center;
          padding: 10px;
        }
        :first-child {
          border-left: 1px solid #f5f5f5;
        }
        td:last-child {
          border-right: 1px solid #f5f5f5;
        }
      }
    }
    td {
      text-align: left;
    }
    .imgBox {
      display: flex;
      justify-content: flex-start;
      img {
        width: 80px;
        height: 80px;
      }
      p {
        font-size: 14px;
        text-align: left;
        margin-top: 5px;
        margin-left: 10px;
      }
      p:nth-child(2) {
        color: #666;
      }
    }
  }
  //收货信息
  .Receive {
    div {
      text-align: left;
      border: 1px solid #f5f5f5;
      padding: 20px 0;
      p {
        margin: 0 0 10px 20px;
        font-size: 14px;
        span {
          color: #999;
          margin-right: 10px;
        }
      }
    }
  }
  .result {
    float: right;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 40px;
    div {
      display: flex;
      justify-content: space-around;
      p {
        width: 100px;
        margin: 10px;
        i {
          display: inline-block;
          width: 2em;
        }
      }
      .Rtext {
        color: #cf4444;
        font-size: 20px;
      }
      :first-child {
        text-align: left;
      }
      :last-child {
        text-align: right;
      }
    }
  }
}
</style>